<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/public.css">
    <style media="screen">
      .box{
        width: 715px;
        height: 176px;
        background: url(images/Header.jpg) no-repeat;
        margin: 100px auto;
        position: relative;
      }
      .box ul{
        width: 692px;
        height: 27px;
        position: absolute;
        right: 0;
        bottom: 0;
        background: url(images/Navigation.gif) no-repeat;
      }
      .box ul li{
        float: left;
        height: 100%;
      }
      .box ul li a{
        display: block;
        height: 27px;
      }
      .box ul li a.a1{
        width: 66px;
      }
      .box ul li a.a2{
        width: 69px;
      }
      .box ul li a.a3{
        width: 79px;
      }
      .box ul li a.a4{
        width: 85px;
      }
      .box ul li a.a5{
        width: 58px;
      }
      .box ul li a:hover{
        background: url(images/Navigation.gif) no-repeat;
      }
      .box ul li a.a1:hover{
        width: 66px;
        background-position: 0 -27px;
      }
      .box ul li a.a2:hover{
        width: 69px;
        background-position: -66px -27px;
      }
      .box ul li a.a3:hover{
        width: 79px;
        background-position: -135px -27px;
      }
      .box ul li a.a4:hover{
        width: 85px;
        background-position: -214px -27px;
      }
      .box ul li a.a5:hover{
        width: 58px;
        background-position: -299px -27px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <a href="#" class="a1"></a>
        </li>
        <li>
          <a href="#" class="a2"></a>
        </li>
        <li>
          <a href="#" class="a3"></a>
        </li>
        <li>
          <a href="#" class="a4"></a>
        </li>
        <li>
          <a href="#" class="a5"></a>
        </li>
      </ul>
    </div>
  </body>
</html>
